<template>
	<view class="publish">
		<view class="header common-top-bar">
			<view class="left">
				<!-- #ifdef H5 -->
				<i class="iconfont icon-zuojiantou" @click="$handleOpenUrl('', 2)"></i>
				<!-- #endif -->
			</view>
			<p class="fs_36 c_333">圈子</p>
			<view class="send fs_26 fw_600" @click="handlePublish">发布</view>
		</view>
		<view class="empty"></view>
		<view class="content">
			<view class="inner">
				<textarea v-model.trim="content" maxlength="1000" placeholder="来吧，尽情发挥吧..."></textarea>
				<span class="tips fs_26 c_999">字数限制1000字以内</span>
			</view>
			<!-- 图片 -->
			<view v-if="!videoUrl" class="picture">
				<view v-if="imgs.length>0" class="imgs">
					<view class="img-box" v-for="(item, index) in imgs" :key="item">
						<img :src="item" alt="">
						<i class="iconfont icon-jianhao c_666" @click="delImg(index)"></i>
					</view>
				</view>
				<view v-if="imgs.length<3" class="addimg"  @click="handleUpload">
					<i class="iconfont icon-21 c_999 needsclick"></i>
					<span v-if="imgs.length==0" class="c_999">上传图片或视频</span>
				</view>
			</view>
			<!-- 视频 -->
			<view v-else class="video_box">
				<img :src="videoUrl+'?x-oss-process=video/snapshot,t_0,m_fast,f_png,ar_auto'" alt="" @click="showVideo=true">
				<i class="iconfont icon-jianhao c_666" @click="videoUrl='',delImg(0)"></i>
				<i class="iconfont icon-iconset0481" @click="showVideo=true"></i>
			</view>
			<!-- <CCII-Upload v-show="false" ref="upload" @change="change" /> -->
			<view class="line topline"></view>
			<view class="address fs_28" @click="handleLocation1">
				<i class="iconfont icon-dizhi1 c_666"></i>
				<view v-if="!province" style="width: 100%;color: #ccc;">请去设置中打开定位服务</view>
				<view v-if="province">
					<p class="c_333 ellipsis" v-if="province=='台湾省'||province=='香港特别行政区'||province=='澳门特别行政区'||province==city">{{province}}</p>
					<p class="c_333 ellipsis" v-else>{{province}} {{city}}</p>
				</view>
				<p v-else v-html="tip"></p>
				<i class="iconfont icon-jiantou c_999"></i>
			</view>
			<view class="line"></view>
		</view>
		<!-- <view class="video_layer" v-show="showVideo" @click="showVideo=false">
            <video :src="videoUrl" controls autoplay></video>
        </view> -->
	</view>
</template>

<script>
	import {
		getUploadImage
	} from "@/api/common/index.js"
	import {
		publishCircle
	} from '@/api/circle/index.js'
	// #ifdef !H5
	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js"
	// #endif
	export default {
		data() {
			return {
				imgs: [],
				videoUrl: '',
				content: '',
				fileType: 1, // 2视频  1图片
				fileUrl: [],
				city: '',
				province: '',
				showVideo: false, // 预览上传的视频
				tip: '',
			}
		},
		onReady() {
			// #ifdef H5
			uni.getLocation({
				success: res => {
					this.latitude = res.latitude
					this.longitude = res.longitude
					this.getUserLocation();
				}
			});
			// #endif
		},
		onShow() {
			// #ifdef !H5
			this.handleLocation()
			// #endif
		},
		methods: {
			handleLocation1() {
				// #ifdef !H5
				this.handleLocation()
				// #endif
				// #ifdef H5
				this.getUserLocation()
				// #endif
			},
			// h5定位
			getUserLocation() {
				let vm = this;
				let locationObj = vm.latitude + ',' + vm.longitude;
				let url = 'https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&output=jsonp&poi_options=page_size=1;page_index=1';
				this.$jsonp(url, {
					key: 'WQOBZ-RLIWW-QBWRE-RELJ3-3MMHE-YCBB3',
					location: locationObj
				})
				.then(res => {
					this.city = res.result.address_component.city;
					this.province = res.result.address_component.province;
				})
				.catch(err => {
					console.log(err);
				});
			},
				
			handleLocation() {
				let qqmapsdk = new QQMapWX({
					key: 'WQOBZ-RLIWW-QBWRE-RELJ3-3MMHE-YCBB3'
				});
				console.log(123)
				uni.getLocation({
					type: 'wgs84',
					success: res=> {
						console.log(res)
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success:res=> {
								this.city = res.result.address_component.city;
								this.province = res.result.address_component.province;
							}
						})
					},
					fail:err=>{
						if(err.errMsg.indexOf('geolocation:12')!=-1) {
							uni.showToast({
								title:"请去手机设置中打开定位权限",
								icon:"none"
							})
						}
					}
					
				});
			},

			back() {
				this.content = ''
				this.videoUrl = ''
				this.fileType = ''
				this.imgs = []
				this.fileUrl = []
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.isLoad = 2;
				this.$handleOpenUrl("", 2)
			},
			getFile() {
				if (this.fileType == 1) {
					// 图片
					var newList = []
					this.fileUrl.forEach(v => {
						newList.push(v + '?x-oss-process=image/quality,q_90/auto-orient,1')
					})
					return newList.join('|')
				} else {
					// 视频
					return this.fileUrl[0]
				}
			},
			async handlePublish() {
				if (!this.content) {
					uni.showToast({
						icon: "none",
						title: '请输入圈子内容'
					})
					return
				}
				if (!this.city || !this.province) {
					uni.showToast({
						icon: "none",
						title: '请选择您当前的位置'
					})
					return
				}
				if (this.province == '台湾省' || this.province == '香港特别行政区' || this.province == '澳门特别行政区') {
					this.city = ''
				}
				let res = await publishCircle({
					province: this.province,
					city: this.province === this.city ? '' : this.city,
					content: this.content,
					fileType: 1,
					fileUrl: this.getFile(),
					openid: uni.getStorageSync('openid'),
					releaseWay: 1,
					userId: uni.getStorageSync('userId') || ''
				})
				if (res.code == 0) {
					uni.showToast({
						title: '发布成功'
					})
					setTimeout(() => {
						this.back()
					}, 1000)
				} else {
					uni.showToast({
						icon: "none",
						title: res.msg
					})
				}
			},
			handleUpload() {
				uni.chooseImage({
					count: 3,
					// sizeType:  original 原图，compressed 压缩图，默认二者都有
					sizeType: "original",
					success: res => {
						let size = parseFloat(res.tempFiles[0].size / 1024 / 1024).toFixed(2)
						if (size > 10) {
							uni.showToast({
								title: '请上传10M以内的图片',
								icon: 'none'
							})
							return
						}
						res.tempFilePaths.map(item => {
							getUploadImage({
								file: item,
							}).then(res => {
								let data = JSON.parse(res)
								if (data.code == 0) {
									this.imgs.push(data.data.url)
									this.fileUrl = this.imgs
								}
							})
						})

					}
				});
			},
			// async change(fd) {
			//     if (fd.isImage === false) {
			//         this.imgs = [] // 清空图片
			//         this.fileType = 2 // 2视频  1图片
			//         this.videoUrl = 'https://v.cciinet.com/'+fd.object
			//         this.fileUrl = [this.videoUrl]
			//     } else {
			//         this.fileType = 1
			//         this.imgs.push('https://v-img.cciinet.com/'+fd.object)
			//         this.fileUrl = this.imgs
			//     }
			// },
			delImg(index) {
				this.fileUrl.splice(index, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.publish {
		height: 100%;
		background-color: #F4F4F4;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1upx solid #f4f4f4;

			background-color: #fff;

			.left {
				width: 141upx;
				margin-left: 20upx;

				i {
					font-size: 40upx;
					font-weight: 600;
				}
			}

			p {

				flex: 1;
				text-align: center;
			}

			.send {
				width: 141upx;
				height: 54upx;
				line-height: 54upx;
				color: #00428e;
				background-color: #fff;
				border: 2upx solid #00428e;
				border-radius: 27upx;
				text-align: center;
				margin-right: 30upx;
			}
		}

		.empty {
			height: 103upx;
		}

		.content {
			height: 846upx;
			background: #FFFFFF;
			padding: 24upx 0 0;

			.inner {
				position: relative;
				height: 342upx;
				background: #FFFFFF;
				border: 2upx solid #EEEEEE;
				border-radius: 4upx;
				padding: 20upx;
				margin-bottom: 32upx;
				margin-right: 30upx;
				margin-left: 30upx;

				textarea {
					height: 100%;
					resize: none;
					font-size: 28upx;
				}

				.tips {
					position: absolute;
					bottom: 20upx;
					right: 20upx;
				}
			}

			.picture {
				display: flex;

				.imgs {
					display: flex;
					margin-left: 30upx;

					.img-box {
						position: relative;
						width: 170upx;
						height: 170upx;
						background: #F4F4F4;
						margin-right: 30upx;

						img {
							height: 100%;
							width: 100%;
						}

						.icon-jianhao {
							position: absolute;
							top: -18upx;
							right: -15upx;
							font-size: 30upx;
						}
					}
				}

				.addimg {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 170upx;
					height: 170upx;
					background: #F4F4F4;
					margin-left: 30upx;

					.iconfont {
						font-size: 40upx;
						padding: 50upx;
					}

					span {
						position: absolute;
						bottom: -40upx;
						font-size: 24upx;
					}
				}
			}

			.video_box {
				position: relative;
				height: 170upx;
				width: 170upx;

				img {
					height: 100%;
					width: 100%;
				}

				.icon-jianhao {
					position: absolute;
					top: -18upx;
					right: -15upx;
					font-size: 30upx;
				}

				.icon-iconset0481 {
					position: absolute;
					top: calc(50% - 20upx);
					left: calc(50% - 20upx);
					z-index: 666;
					font-size: 40upx;
					color: #fff;
				}
			}

			.line {
				float: right;
				width: 614upx;
				height: 2upx;
				background: #EEEEEE;
			}

			.topline {
				margin-top: 77upx;
			}

			.address {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 77upx;
				height: 110upx;
				width: 100%;
				margin-right: 30upx;

				.iconfont {
					font-size: 30upx;
				}
				.icon-dizhi1 {
					margin-left: 30upx;
				}
				.icon-jiantou {
					margin-right: 30upx;
				}
				p {
					width: 600upx;
				}
			}
		}

		.video_layer {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999999;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, .9);

			video {
				max-width: 60%;
			}
		}
	}
</style>
